<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-04-10 13:44:29
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-04-25 15:56:41
 * @FilePath: \crm\pagesecharts\index\components2\card7.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="card">
    <view class="title u-flex u-flex-between">
      <view class="u-flex">
        <u--image
          :src="$z.imgsrc('jian7.png')"
          width="36rpx"
          height="36rpx"
        ></u--image>
        <view class="text">客户类型统计</view>
      </view>

      <!-- <u-icon name="arrow-right" size="12" color="#999999"></u-icon> -->
    </view>
    <view class="title1">当前客户总数</view>
    <view class="u-flex u-flex-between jedd">
      <view class="l">
        273234
        <text class="text">人</text>
      </view>
      <view class="r">
        新增客户
        <text class="num">536</text>
        人
      </view>
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="text1">{{ item.text1 }}</view>
        <view class="text2">
          {{ item.text2 }}
          <text class="dw">{{ item.dw }}</text>
        </view>
      </view>
    </view>
    <view style="width: 100%; height: 420rpx">
      <l-echart ref="chartRef" @finished="init"></l-echart>
    </view>
  </view>
</template>
<script>
import * as echarts from "@/pagesecharts/lime-echart/static/echarts.min";
import lEchart from "@/pagesecharts/lime-echart/components/l-echart/l-echart.vue";
export default {
  components: {
    lEchart,
  },
  data() {
    return {
      option: {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          data: ["新增客户数", "跟进客户数", "成交客户数"],
          textStyle: {
            //图例文字的样式
            color: "#838589",
          },
        },
        color: ["#39C189", "#3F88FF", "#DC2626"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["3/1", "3/2", "3/3", "3/4", "3/5", "3/6", "3/7"],
          axisLine: {
            lineStyle: {
              color: "#a9a9a9",
              width: 1, //这里是为了突出显示加上的
            },
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#a9a9a9",
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "新增客户数",
            type: "line",
            symbol: "circle", //将小圆点改成实心 不写symbol默认空心
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "跟进客户数",
            type: "line",
            stack: "Total",
            symbol: "circle", //将小圆点改成实心 不写symbol默认空心
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "成交客户数",
            type: "line",
            stack: "Total",
            symbol: "circle", //将小圆点改成实心 不写symbol默认空心
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
      },
      list: [
        {
          text1: "新增客户数",
          text2: "23",
          dw: "人",
        },
        {
          text1: "跟进客户数",
          text2: "23",
          dw: "人",
        },
        {
          text1: "跟进次数",
          text2: "23",
          dw: "次",
        },
        {
          text1: "首次成交客户数",
          text2: "23",
          dw: "人",
        },
        {
          text1: "复购客户数",
          text2: "23",
          dw: "人",
        },
        {
          text1: "客户活跃率",
          text2: "100%",
        },
      ],
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    async init() {
      const chart = await this.$refs.chartRef.init(echarts);
      chart.setOption(this.option);
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  margin: 14rpx 18rpx;
  background-color: #fff;
  border-radius: 8rpx;

  // padding: 0 24rpx;
  // padding-bottom: 16rpx;
  .title {
    font-size: 28rpx;
    font-weight: bold;
    height: 88rpx;
    padding: 0 24rpx;

    .text {
      padding-left: 12rpx;
      line-height: 1;
    }
  }

  .title1 {
    color: #838589;
    font-size: 24rpx;
    line-height: 32rpx;
    padding: 0 24rpx;
  }

  .jedd {
    height: 100rpx;
    padding: 0 24rpx;

    .l {
      font-size: 48rpx;
      font-weight: bold;

      .text {
        font-size: 28rpx;
        color: #838589;
        padding-left: 24rpx;
      }
    }

    .r {
      font-size: 32rpx;
      color: #838589;

      .num {
        font-size: 36rpx;
        color: #171a1d;
        font-weight: bold;
        padding: 0 16rpx;
      }
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 24rpx;

    .item {
      width: calc(33.33% - 8rpx);
      background-color: #f4f6fa;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // align-items: center;
      margin-bottom: 18rpx;
      height: calc(56 * 2rpx);
      border-radius: 8rpx;
      padding: 18rpx 20rpx;

      .text1 {
        color: #838589;
        font-size: 24rpx;
        line-height: 1;
      }

      .text2 {
        color: #171a1d;
        font-size: 28rpx;
        line-height: 1;
        font-weight: bold;

        .dw {
          padding-left: 24rpx;
          color: #838589;
          font-size: 24rpx;
        }
      }

      .text {
        // color: #171a1d;
        // font-size: 24rpx;
        // padding: 8rpx 0;
        // margin-bottom: 24rpx;
      }
    }
  }
}
</style>
